<template>
	<view class="login-container">

		<view class="login-header">
			<view class="header-content">
				<text class="header-title">登录</text>
				<text class="header-subtitle">欢迎溜娃车-商户端</text>
			</view>
		</view>

		<view class="login-card">

			<view class="input-group">
				<view class="input-icon">
					<uni-icons type="person" size="20" color="#FFB800"></uni-icons>
				</view>
				<view class="input-container">
					<text class="input-label">账户</text>
					<input type="text" v-model="formData.username" maxlength="11" placeholder="请输入账号"
						placeholder-style="color: #CCCCCC; font-size: 14px;" class="input-field" />
				</view>
			</view>

			<view class="input-group">
				<view class="input-icon">
					<uni-icons type="locked" size="20" color="#FFB800"></uni-icons>
				</view>
				<view class="input-container">
					<text class="input-label">密码</text>
					<input type="password" v-model="formData.password" maxlength="6" placeholder="请输入密码"
						placeholder-style="color: #CCCCCC; font-size: 14px;" class="input-field" />
				</view>
			</view>


			<button class="login-button" @click="handleLogin">登录</button>


			<view class="extra-features">
				<text class="help-center" @click="goToUserAgreement">用户协议</text>
				<text class="help-center" @click="goToPrivacyPolicy">隐私政策</text>
			</view>
		</view>

		<view class="bottom-info">
			<text>登录即代表您已同意</text>
			<text class="agreement-link" @click="goToUserAgreement">《用户协议》</text>
			<text>和</text>
			<text class="agreement-link" @click="goToPrivacyPolicy">《隐私政策》</text>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/api/user'

	export default {
		data() {
			return {
				formData: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			// 登录
			async handleLogin() {
				// 表单验证
				if (!this.formData.username || !this.formData.password) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return
				}
				try {
					uni.showLoading({
						title: '登录中...',
						mask: true
					})
					const res = await login(this.formData)
					// 存储token
					uni.setStorageSync('token', res.data.token)
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					// 跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/home/index"
						});
					}, 1500)

				} catch (error) {
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},

			// 用户协议
			goToUserAgreement() {
				uni.navigateTo({
					url: '/pages/agreement/user'
				})
			},

			// 隐私政策
			goToPrivacyPolicy() {
				uni.navigateTo({
					url: '/pages/agreement/privacy'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		position: relative;

		// Header styling with gradient background
		.login-header {
			height: 200px;
			background: linear-gradient(135deg, #FFD000 0%, #FFBC00 100%);
			border-radius: 0 0 30px 30px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
			padding: 30px;
			position: relative;

			.header-content {
				margin-top: 20px;

				.header-title {
					font-size: 28px;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 8px;
				}

				.header-subtitle {
					font-size: 16px;
					color: rgba(0, 0, 0, 0.65);
					display: block;
				}
			}
		}

		// Card containing the login form
		.login-card {
			position: absolute;
			top: 140px;
			left: 20px;
			right: 20px;
			background-color: #FFFFFF;
			border-radius: 16px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			padding: 25px;
			z-index: 1;

			// Input group styling
			.input-group {
				display: flex;
				align-items: center;
				background-color: #F9F9F9;
				border-radius: 12px;
				height: 55px;
				margin-bottom: 16px;
				padding: 0 15px;

				.input-icon {
					margin-right: 12px;
				}

				.input-container {
					flex: 1;
					display: flex;
					align-items: center;

					.input-label {
						font-size: 15px;
						color: #333;
						font-weight: 500;
						width: 40px;
					}

					.input-field {
						flex: 1;
						height: 100%;
						font-size: 14px;
						color: #333;
					}
				}
			}

			// Login button styling
			.login-button {
				height: 50px;
				margin-top: 25px;
				background: linear-gradient(90deg, #FF8C00 0%, #FF6B01 100%);
				border-radius: 25px;
				color: #FFFFFF;
				font-size: 16px;
				font-weight: bold;
				border: none;
				box-shadow: 0 4px 8px rgba(255, 107, 1, 0.25);
				position: relative;
				overflow: hidden;

				&::after {
					border: none;
				}

				&:active {
					opacity: 0.9;
				}
			}

			// Additional options
			.extra-features {
				display: flex;
				justify-content: space-between;
				margin-top: 16px;
				padding: 0 5px;

				text {
					font-size: 13px;
					color: #999;

					&.help-center {
						color: #666;
					}
				}
			}
		}

		.bottom-info {
			position: absolute;
			bottom: 30px;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			text {
				font-size: 12px;
				color: #999;

				&.agreement-link {
					color: #FF6B01;
					margin: 0 2px;
				}
			}
		}
	}
</style>